<template>
  <el-container class="link-container">
    <el-aside class="left-menu">
      <el-menu :default-active="indexs" class="model-div">
        <el-menu-item index="1" @click="$toPath('/person');">
          <span>个人中心</span>
        </el-menu-item>
        <el-menu-item index="2" @click="$toPath('/order');">
          <span>历史订单</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container class="link-main">
      <el-main style="padding: 0">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {ref, onMounted } from "vue";
import { useRoute } from 'vue-router';

const route = useRoute();

const indexs = ref('1')
const linkParam = ref('')
const isPhone = ref(false)

onMounted(() => {
  // 判断是否为PC端
  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
  if (isMobile) {
    isPhone.value = true
  }
  linkParam.value = route.name
  if ( linkParam.value === 'OrderView'){
    indexs.value = '2'
  }
})
</script>

<style scoped lang="less">
.link-container{
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0 90px 0;
  .left-menu {
    box-shadow: 0 0 8px rgb(0 0 0 / 18%);
    margin-right: 35px;
    height: 67vh;
    padding-top: 50px;
    width: 18%;

    .el-menu-item {
      height: 75px;
      justify-content: center;

      span {
        font-size: 20px;
      }
    }
  }
  .el-menu {
    border-right: none;
  }
  .link-main{
    box-shadow: 0 0 8px rgb(0 0 0 / 18%);
  }
}
@media screen and (max-width: 720px) {
  .link-container{
    display: flex;
    flex-direction: column;
    width:360px;
    .left-menu {
      width:360px;
      height: auto;
      padding-top: 0;
      .model-div{
        display: flex;
      }
    }
  }
}
</style>